<!--
 * @Author: your name
 * @Date: 2021-08-07 16:59:10
 * @LastEditTime: 2021-08-11 17:31:01
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \Self\hrsaas-86\src\views\departments\index.vue
-->
<template>
  <div class="departments-container">
    <div class="app-container">
      <!-- 卡片视图组件 -->
      <el-card class="tree-card">
        <!-- el-row+el-col ==>栅格系统 -->

        <tree-tools
          :Data="company"
          :isRoot="false"
          @addDepts="showDialog"
        ></tree-tools>
        <!-- 树形控件 (data是树形控件的数据源;label展示文本;children是进行父子节点依赖关系的属性) -->
        <el-tree :data="depts" :props="defaultProps" :default-expand-all="true">
          <!-- 自定义插槽部分,解构数据 -->
          <template #default="{data}">
            <!-- {{ (node, data) }} -->
            <tree-tools
              :Data="data"
              :isRoot="true"
              @reload="getDepartments"
              @addDepts="showDialog"
              @editDepts="editDepts"
            ></tree-tools>
          </template>
        </el-tree>
      </el-card>
      <!-- 新增部门的对话框 -->

      <add-depts
        :dialog-visible="dialogVisible"
        @closeDialog="closeDialog"
        :Data="apartData"
        :deptsList="deptsList"
        @reload="getDepartments"
        ref="addDeptsRef"
      ></add-depts>
    </div>
  </div>
</template>

<script>
import TreeTools from './components/tree-tools.vue'
import AddDepts from './components/add-depts.vue'
import { reqGetDepartments } from '@/api/departments'
import { tranListToTreeData } from '@/utils/index.js'
export default {
  name: 'departments',
  data() {
    return {
      company: { name: '传智教育', manager: '负责人' }, // 第一个引用的组件需要传递给子组件的参数
      depts: [], // 公司的部门列表
      defaultProps: {
        children: 'children',

        label: 'name'
      },
      //  控制新增部门对话框的布尔值
      dialogVisible: false,
      apartData: {},
      deptsList: [] //  部门列表的原始数据
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    async getDepartments() {
      const {
        data: { depts }
      } = await reqGetDepartments()
      this.depts = tranListToTreeData(depts, '') // 管理树形结构

      console.log(this.depts)
      this.deptsList = depts
    },
    // 增加部门中关闭弹窗
    closeDialog() {
      this.dialogVisible = false
    },
    //  点击新增部门展示对话框并介绍点击部门的信息
    showDialog(apartData) {
      // 1.展示对话框
      this.dialogVisible = true
      // 2.将点击的部门信息存储,并传递给add-depts子组件
      this.apartData = apartData
      // 如果新增的是一级部门  保证新增的一级部门有pid
      this.company.id = ''
    },
    editDepts(Data) {
      // 1.展示对话框
      this.dialogVisible = true
      // 2.将点击的部门信息存储,并传递给add-depts子组件
      this.apartData = Data
      // 3. 在编辑状态下 调用add-depts组件中这个EditshowDialog方法
      // 父组件直接调用子组件的方法
      this.$refs.addDeptsRef.showDialog(Data)
    }
  },

  components: { TreeTools, AddDepts }
}
</script>

<style lang="scss" scoped>
.tree-card {
  padding: 20px 20px;
}
// 直接覆盖树形样式即可
::v-deep .el-tree {
  // 小三角的样式, 去掉默认的小三角的旋转效果
  .el-tree-node__expand-icon.expanded {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  // 有子节点 且未展开 +
  .el-icon-caret-right:before {
    background: url('~@/assets/common/add.png') no-repeat 0 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  // 有子节点 且已展开 -
  .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url('~@/assets/common/sub.png') no-repeat 0 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
  // 没有子节点
  .el-tree-node__expand-icon.is-leaf::before {
    background: url('~@/assets/common/man.png') no-repeat 0 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    font-size: 16px;
    background-size: 16px;
  }
}
</style>
